{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}

{% block content %}
    <div class="account">
       <div class="title">用户注册</div>
        <form id="dataForm" method="post">
        {% csrf_token %}
          {% for filed in form %}
              <div class="form-group">
              {% if filed.name == 'code' %}
              <label for="{{ field.id_for_label }}">{{ filed.label }}</label>
                  <div class="clearfix">
                      <div class="col-md-6" style="padding-left: 0">{{ filed }}<span class="err_msg"></span></div>
                      <div class="col-md-6"><input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码"></div>
                  </div>
              {% else %}
                  <label for="{{ field.id_for_label }}">{{ filed.label }}</label>
                    {{ filed }}
                    <span class="err_msg"></span>
              {% endif %}
              </div>
          {% endfor %}
          <input id="btnSubmit" type="button" class="btn btn-primary" value="注册">
        </form>
    </div>

{% endblock %}

{% block js %}
    <script>
        //页面框架加载完成之后自动执行函数
        $(function () {
            bindClickBtnSms();
            bindClickSubmit();
        });
        /*
        * 点击获取验证码的按钮绑定事件
        * */
        function bindClickBtnSms() {
            $('#btnSms').click(function () {
                $('.err_msg').empty();//每次点击时重置错误信息
                //获取用户输入的手机号
                var phoneNum=$('#id_phone').val();
                //发送ajax请求，把手机号发送过去
                $.ajax({
                    url:"{% url 'send_sms' %}",
                    type:'GET',
                    data:{
                        phone:phoneNum,
                        tpl:'register'
                    },//携带的参数
                    dataType:'JSON',//将服务端返回数据反序列化为字典
                    success:function (res) {
                            //ajax请求发送成功之后自动执行，res后端返回的值
                        if (res.status){
                            bindSendSms()
                        }else{
                            $.each(res.error,function (key,value) {
                                $('#id_'+key).next().text(value[0]);
                            })
                        }
                    },
                    error:''
                })

            })
        }

        function bindSendSms() {
            var $smsBtn=$('#btnSms');
            $smsBtn.prop('disable',true);//禁用
            var time=60;
            var remind=setInterval(function () {
                $smsBtn.val(time+'秒重新发送');
                time=time-1;
                if(time<1){
                    clearInterval(remind)
                    $smsBtn.prop('disable',false)
                }
            },1000)

        }

        /*点击注册获取各栏数据*/
        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                $('.err_msg').empty()
                //收集表单数据
                //ajax发送到后台
                $.ajax({
                    url:'{% url "register" %}',
                    type:'POST',
                    data:$('#dataForm').serialize(),
                    dataType: 'JSON',
                    success:function (res) {
                        if(res.status){
                            location.href=res.data
                        }else{
                            $.each(res.error,function (key,value) {
                                $('#id_'+key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}